<script setup>
import {ref} from 'vue'
import {updateUser, userInfo} from '@/api/set.js'
import {showToast} from 'vant'
const onClickLeft = () => history.back()

/**
 * 个人信息回显
 */
const info = ref({
  avatar: '',
  nickname: '',
  gender: 0,
  email: '',
  description: ''
})
const checked = ref('1')
const avatarFiles = ref([])
const getUserInfo = () => {
  userInfo().then(res => {
    if (res.data.code === 1) {
      info.value = res.data.data
      checked.value = res.data.data.gender + ''
      if (info.value.avatar) {
        avatarFiles.value = [{ url: info.value.avatar }];
      }
    } else {
      showToast('获取用户信息失败')
    }
  }).catch(err => {
    console.log(err)
  })
}
getUserInfo()

/**
 * 编辑个人信息
 */
const clickEdit = () => {
  const editForm = {
    avatar: avatarFiles.value[0]?.url,
    nickname: info.value.nickname,
    gender: checked.value,
    email: info.value.email,
    description: info.value.description
  }
  if(rules()) {
    updateUser(editForm).then(res => {
      if (res.data.code === 1) {
        showToast('修改成功')
      } else {
        showToast('修改失败')
      }
    }).catch(err => {
      console.log(err)
    })
  }

}

const rules = () => {
  const nicknameRegex = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,8}$/
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  const descriptionRegex = /^.{0,50}$/

  if (!nicknameRegex.test(info.value.nickname)) {
    showToast('昵称格式错误，请输入1-8位中英文或数字')
    return false
  }

  if (!emailRegex.test(info.value.email)) {
    showToast('邮箱格式错误，请输入正确的邮箱地址')
    return false
  }

  if (!descriptionRegex.test(info.value.description)) {
    showToast('简介格式错误，请输入0-50个字符')
    return false
  }
  return true
}
</script>

<template>
  <div class="info-set">
    <van-nav-bar
      fixed
      left-arrow
      left-text="返回"
      placeholder
      title="个人信息设置"
      @click-left="onClickLeft"
    />
    <div class="info-form">
      <div class="info-form-item item-1">
        <van-field label="头像" name="uploader">
          <template #input>
            <van-uploader v-model="avatarFiles" :max-count="1" multiple/>
          </template>
        </van-field>
      </div>
      <div class="info-form-item">
        <van-cell-group inset>
          <van-field v-model="info.nickname" label="昵称" placeholder="请输入昵称"/>
        </van-cell-group>
      </div>
      <div class="info-form-item item-1">
        <van-field label="性别" name="radio">
          <template #input>
            <van-radio-group v-model="checked" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </div>
      <div class="info-form-item">
        <van-cell-group inset>
          <van-field v-model="info.email" label="邮箱" placeholder="请输入邮箱"/>
        </van-cell-group>
      </div>
      <div class="info-form-item">
        <van-cell-group inset>
          <van-field v-model="info.description" autosize label="简介"
          maxlength="50" placeholder="请输入简介"  show-word-limit type="textarea"
          />
        </van-cell-group>
      </div>
      <div class="edit-btn-container">
        <div class="edit-btn" @click="clickEdit">确认修改</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.info-form {
  margin-top: 10px;
}

.info-form-item {
  margin-bottom: 10px;
}

.item-1 {
  padding: 0 16px;
}

.edit-btn-container {
  padding: 0 24px;
}

.edit-btn {
  width: 100%;
  height: 42px;
  margin-top: 10px;
  background: linear-gradient(90deg, #3cd7ec, #1125ff);
  color: #fff;
  border-radius: 39px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
  letter-spacing: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit-btn:active {
  background: linear-gradient(90deg, #3cd7ec, rgba(17, 37, 255, 0.76));
}
</style>
